<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人主页</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<script type="text/javascript" src="layui/layui.all.js"></script>
	</head>
	<body>
		<!-- div+css -->
		<!-- <input type="button" value="提交" class="layui-btn layui-btn-danger"/> -->
		<div class="layui-container">
			<div class="layui-row layui-col-space5">
				<div class="layui-col-md3">
					<!-- 个人信息 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-gray">
							<span class="layui-icon layui-icon-user"></span>个人信息
						</div>
						<div class="layui-card-body" align="center">
							<img class="layui-circle" src="img/myphoto.jpg" style="width: 150px;height:150px;" />
							<br>
							<label class="layui-bg-green" style="font-size: 20px;padding-left:20px;padding-right: 20px ;"><kbd>邱&nbsp;李&nbsp;捷</kbd></label>
							<br>
							<div align="left">
								<span class="layui-icon layui-icon-location"></span>国籍：中国<br>
								<span class="layui-icon layui-icon-home"></span>地址：天津<br>
								<span class="layui-icon layui-icon-date"></span>出生日期：2000-12-06<br>
								<span class="layui-icon layui-icon-cellphone"></span>电话：15280780558<br>
								<span class="layui-icon layui-icon-template"></span>Email：249839771@qq.com<br>
								<br>
							</div>
						</div>
					</div>
					<!-- 技术能力 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-orange">
							<span class="layui-icon layui-icon-speaker"></span>技术能力
						</div>
						<div class="layui-card-body">
							HTML5:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-blue" lay-percent="90%"></div>
							</div>
							IOS:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
							</div>
							PHP:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-cyan" lay-percent="30%"></div>
							</div>
							jQuery:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-orange" lay-percent="60%"></div>
							</div>
							CSS:
							<div class="layui-progress layui-progress-big" lay-showPercent="true">
								<div class="layui-progress-bar layui-bg-red" lay-percent="70%"></div>
							</div>
						</div>
					</div>
					<!-- 联系我 -->
					<div class="layui-card">
						<div class="layui-card-header layui-bg-green">
							<span class="layui-icon layui-icon-flag"></span>联系我
						</div>
						<div class="layui-card-body">
							<form class="layui-form">
								<div class="layui-form-item">
									<label class="layui-form-label">Email:</label>
									<div class="layui-input-block">
										<input type="text" placeholder="请输入邮箱" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">内容：</label>
									<div class="layui-input-block">
										<textarea cols="50" rows="5" class="layui-textarea" placeholder="请输入内容"></textarea>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block" align="right">
										<a href="" class="layui-btn layui-icon-success">
											<span class="layui-icon layui-icon-ok-circle"></span>提交
										</a>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="layui-col-md9">
					<div class="layui-elem-quote layui-bg-gray">
						本人来自天津中德应用技术大学软件与通信学院，2018级学生，精通HTML5，CSS3，<code style="color: red;font-weight: bold;">JavaScript</code>等网页开发技术，熟练使用HBuilder，Git等开发工具。
						<div align="right">
							<a href="#" class="layui-btn layui-btn-lg layui-bg-green">
								<span class="layui-icon layui-icon-share"></span>了解更多
							</a>
						</div>
					</div>
					<!-- 教育经历 -->
					<div class="layui-collapse">
						<div class="layui-colla-item">
							<div class="layui-colla-title">工作经验</div>
							<div class="layui-colla-content layui-show">
								<table class="layui-table" lay-even>
									<!-- <caption>工作经历</caption> -->
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>工作单位</td>
										<td>联系人</td>
										<td>备注</td>
									</tr>
									<tr>
										<td><input type="checkbox"></td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="layui-colla-item">
							<div class="layui-colla-title">教育经历</div>
							<div class="layui-colla-content layui-show">
								<table class="layui-table" lay-even>
									<tr>
										<td>序号</td>
										<td>起止时间</td>
										<td>工作单位</td>
										<td>联系人</td>
										<td>备注</td>
									</tr>
									<tr>
										<td><input type="checkbox"></td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
									<tr>
										<td>1</td>
										<td>2019-11~2019-12</td>
										<td>融创软通</td>
										<td>邱李捷</td>
										<td>15280780558</td>
									</tr>
								</table>
							</div>
						</div>
						<div class="layui-colla-item">
							<div class="layui-colla-title">项目经验</div>
							<div class="layui-colla-content layui-show">

							</div>
						</div>
					</div>
					<!-- 图片轮播 -->
					<div class="layui-card">
						<div class="layui-card-header">获奖证书</div>
						<div class="layui-card-body">
							<div class="layui-carousel" id="certify">
								<div carousel-item align="center">
									<div><img src="img/certify1.jpg" style="width: 80%;height: 300px;"></div>
									<div><img src="img/certify2.jpg" style="width: 80%;height: 300px;"></div>
									<div><img src="img/certify3.jpg" style="width: 80%;height: 300px;"></div>
									<div><img src="img/certify4.jpg" style="width: 80%;height: 300px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
		    </div>
	    </div>
		<script>
			layui.use(['element', 'carousel'], function() {
				var element = layui.element;
				var carousel = layui.carousel; //建造实例
				carousel.render({
					elem: '#certify',
					autoplay: true,
					width: '100%', //设置容器宽度
					Interval: 800,
					arrow: 'always', //始终显示箭头
					anim: 'default' //切换动画方式
				});
			});
		</script>
		<script>
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>
		<br>
		<div class="layui-footer" align="center">
			<address>&copy;2019-2020 Powered By 融创软通邱李捷</address>
		</div>
	</body>
</html>
